<!-- map管理 -->
<template>
  <div class='amap-page-container'>
    <!-- 搜索框 -->
    <el-amap-search-box
        ref='searchbox'
        class='search-box'
        :search-option='searchOption'
        :on-search-result='onSearchResult'
    ></el-amap-search-box>
    <!-- 高德地图组件 -->
    <el-amap vid='amapDemo' :zoom='zoom' :center='center' :plugin='plugin' :events='events' class='amap-demo'>
      <!-- 标记点，可以使用v-for循环设置多个 -->
      <el-amap-marker
          vid='component-marker'
          :position='marker.position'
          :events='marker.events'
          :draggable='true'
      ></el-amap-marker>
    </el-amap>
  </div>
</template>

<script>

const defaultPosition = [113.681423, 34.729528];

export default {
  name: 'myAmap',
  props: {
    value: {
      type: Array,
      default: () => defaultPosition
    },
    searchText: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      zoom: 14, // 视角高度，越小视角越高
      center: defaultPosition, // 地图中心点位置
      events: {
        click: (e) => { // 鼠标点击地图事件
          this.marker.position = [e.lnglat.lng, e.lnglat.lat];
          this.positionChange();
        }
      },
      searchOption: { // 搜索框信息
        city: '北京', // 设置你要搜索的城市。默认全国
        citylimit: false // 是否限制城市内搜索
      },
      marker: { // 坐标点信息
        position: defaultPosition, // 坐标的位置
        events: {
          dragend: (e) => { // 移动坐标点
            this.marker.position = [e.lnglat.lng, e.lnglat.lat];
            this.positionChange();
          }
        }
      },
      // 定位
      plugin: [{
        enableHighAccuracy: true,     //是否使用高精度定位，默认:true
        timeout: 100,                 //超过10秒后停止定位，默认：无穷大
        maximumAge: 0,                //定位结果缓存0毫秒，默认：0
        convert: true,                //自动偏移坐标，偏移后的坐标为高德坐标，默认：true
        showButton: true,             //显示定位按钮，默认：true
        buttonPosition: 'RB',         //定位按钮停靠位置，默认：'LB'，左下角
        showMarker: true,             //定位成功后在定位到的位置显示点标记，默认：true
        showCircle: true,             //定位成功后用圆圈表示定位精度范围，默认：true
        panToLocation: true,          //定位成功后将定位到的位置作为地图中心点，默认：true
        zoomToAccuracy: true,         //定位成功后调整地图视野范围使定位位置及精度范围视野内可见，默认：f
        extensions: 'all',
        pName: 'Geolocation',
        events: {
          init(o) {
            // o 是高德地图定位插件实例
            o.getCurrentPosition((status, result) => {
              console.log(result);
              if (result && result.position) {
                self.lng = result.position.lng;
                self.lat = result.position.lat;
                self.center = [self.lng, self.lat];
                self.loaded = true;
                self.$nextTick();
              }
            });
          }
        }
      }]
    };
  },
  model: {
    prop: 'value',
    event: 'valueChange'
  },
  watch: {
    value(newVal) {
      if (newVal.length == 2) {
        this.marker.position = newVal;
        this.center = newVal;
      } else {
        this.marker.position = defaultPosition;
        this.center = defaultPosition;
      }
    },
    // 监听父组件传入的关键字进行搜索
    searchText(newVal) {
      // 将关键字赋值到输入框内
      this.$refs.searchbox._data.keyword = newVal;
      // 调用搜索实例
      if (this.$refs.searchbox._data.keyword) {
        this.$refs.searchbox.search();
      }
    }
  },
  created() {

  },
  methods: {
    // 搜索获取到的位置信息，只取了第一条数据，需要的话可以设置多个标记点
    onSearchResult(pois) {
      if (pois.length > 0) {
        let { lng, lat } = pois[0];
        this.marker.position = [lng, lat];
        this.center = [lng, lat];
        this.positionChange();
      }
    },
    // 当标记点发生变化时，将数据传给父组件
    positionChange() {
      this.$emit('valueChange', this.marker.position);
    }
  }
};
</script>

<style scoped>
.amap-page-container {
  position: relative;
  width: 100%;
  height: 100%;
}

.amap-demo {
  width: 100%;
  height: 100%;
}

.search-box {
  position: absolute;
  top: 25px;
  left: 20px;
  width: 300px;
}

.amap-page-container {
  position: relative;
}
</style>
